import React from 'react'
import {
  Tag,
  Form,
  Row,
  Col,
  Select,
  Space,
  Input,
  Collapse,
  Table,
  Button,
  DatePicker,
  Tabs,
} from 'antd'
import './Cards.scss'

const { Panel } = Collapse
const { RangePicker } = DatePicker
const { TextArea } = Input

export default function Cards() {
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '吴彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ]
  const columns = [
    {
      title: '指定渠道编码',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '指定渠道名称',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '所在地',
      dataIndex: 'address',
      key: 'address',
    },
  ]
  const dataSource2 = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
  ]
  const columns2 = [
    {
      title: '协议价（元）',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      align: 'center',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '票新（元）',
      dataIndex: 'age',
      key: 'age',
      width: 200,
      align: 'center',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '购进指标量（大单位）',
      dataIndex: 'address',
      key: 'address',
      width: 200,
      align: 'center',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '购进指标量（小单位）',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      align: 'center',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '购进金额（万元）',
      dataIndex: 'age',
      key: 'age',
      width: 200,
      align: 'center',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '纯销指标量（小单位）',
      dataIndex: 'address',
      key: 'address',
      width: 200,
      align: 'center',
      render: () => <Input placeholder="请输入" />,
    }
  ]
  const dataSource3 = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
  ]
  const columns3 = [
    {
      title: '分销奖励',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      align: 'center',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '费用科目',
      dataIndex: 'age',
      key: 'age',
      width: 150,
      align: 'center',
      render: () => (
        <Select 
        defaultValue={'单选项1'}
          style={{
            width: 150,
          }}
          options={[
            {
              value: '单选项1',
              label: '单选项1',
            },
          ]}
        />
      ),
    },
    {
      title: '零售配送',
      dataIndex: 'address',
      key: 'address',
      width: 200,
      align: 'center',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '费用科目',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      align: 'center',
      render: () => (
        <Select
        defaultValue={'多选项'}
          style={{
            width: 180,
          }}
          options={[
            {
              value: 'jack',
              label: 'Jack',
            },
          ]}
        />
      ),
    },
    {
      title: '医疗配送商',
      dataIndex: 'age',
      key: 'age',
      width: 200,
      align: 'center',
      render: () => <Input placeholder="请输入" />,
    },
    {
      title: '费用科目',
      dataIndex: 'address',
      key: 'address',
      width: 200,
      align: 'center',
      render: () => (
        <Select
        defaultValue={'多选项'}
          style={{
            width: 180,
          }}
          options={[
            {
              value: 'jack',
              label: 'Jack',
            },
          ]}
        />
      ),
    },
    {
      title: '自定义7',
      dataIndex: 'address',
      key: 'address',
      width: 200,
      align: 'center',
      render: () => <DatePicker />,
    },
  ]
  const items = [
    {
      key: '1',
      label: `补充协议1`,
      children: (
        <>
          <Row justify="space-between">
            <Col>协议内容：</Col>
            <Col>
              <Button danger size="small">
                删除
              </Button>
            </Col>
          </Row>
          <Row>
            <TextArea rows={4} placeholder="请输入" />
          </Row>
        </>
      ),
    },
    {
      key: '2',
      label: `补充协议2`,
      children: (
        <>
          <Row justify="space-between">
            <Col>协议内容：</Col>
            <Col>
              <Button danger size="small">
                删除
              </Button>
            </Col>
          </Row>
          <Row>
            <TextArea rows={4} placeholder="请输入" />
          </Row>
        </>
      ),
    },
    {
      key: '3',
      label: `补充协议3`,
      children: (
        <>
          <Row justify="space-between">
            <Col>协议内容：</Col>
            <Col>
              <Button danger size="small">
                删除
              </Button>
            </Col>
          </Row>
          <Row>
            <TextArea rows={4} placeholder="请输入" />
          </Row>
        </>
      ),
    },
  ]
  const operations = {
    right: <Button type="primary">新增</Button>,
  }

  return (
    <div>
      <div className="main">
        {/* 第一大块 */}
        <div className="mianHead">
          <div className="line"></div>
          <div className="title">
            <Space>
              <i className="one">1</i>
              <span>协议主体</span>
            </Space>
          </div>
        </div>
        <div className="mianContent">
          <Form
              initialValues={
                {
                 qysj:"2023-3-14 12:00:00",
                 gjzb:'金额',
                 cxzb:'金额',
                 gjqd:'指定渠道',
                 xyzt:'正常'
                }
             }
          >
            <Row>
              <Col span={11}>
                <Form.Item
                  label="协议客户"
                  name="xykh"
                  rules={[
                    {
                      required: true,
                      message: '请选择!',
                    },
                  ]}
                >
                  <Space>
                    <Button>选择客户</Button>
                    <span>上海xxxx公司</span>
                  </Space>
                </Form.Item>
              </Col>
              <Col span={11}>
                <Form.Item label="协议状态" name="xyzt">
                  <Select
                    style={{
                      width: 150,
                    }}
                    options={[
                      {
                        value: '正常',
                        label: '正常',
                      },
                    ]}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={11} style={{ display: 'flex' }}>
                <Space>
                  <Form.Item label="购进指标" name="gjzb">
                    <Select
                      style={{
                        width: 80,
                      }}
                      options={[
                        {
                          value: '金额',
                          label: '金额',
                        },
                      ]}
                    />
                  </Form.Item>
                  <Form.Item name="jesl">
                    <Input
                      placeholder="输入金额/数量"
                      disabled
                      style={{ width: 300 }}
                    />
                  </Form.Item>
                </Space>
              </Col>
              <Col span={11}>
                <Space>
                  <Form.Item label="纯销指标" name="cxzb">
                    <Select
                      style={{
                        width: 80,
                      }}
                      options={[
                        {
                          value: '金额',
                          label: '金额',
                        },
                      ]}
                    />
                  </Form.Item>
                  <Form.Item name="jesl2">
                    <Input
                      placeholder="输入金额/数量"
                      disabled
                      style={{ width: 300 }}
                    />
                  </Form.Item>
                </Space>
              </Col>
            </Row>
            <Row>
              <Col span={11}>
                <Form.Item label="销售区域" name="xsqy">
                  <Space size={[0, 8]} wrap>
                    <Tag>选择区域</Tag>
                    <Tag closable>
                      <span>全国</span>
                    </Tag>
                  </Space>
                </Form.Item>
              </Col>
              <Col span={11}>
                <Form.Item label="签约时间" name="qysj">
                  <Input style={{ width: 400 }} />
                </Form.Item>
              </Col>
            </Row>
            {/* <Row>
              <Form.Item label="购进渠道" name='gjqd'>
                <Space>
                  <Select
                    style={{
                      width: 120,
                    }}
                    options={[
                      {
                        value: '指定渠道',
                        label: '指定渠道',
                      },
                    ]}
                  />
                  <Button>请选择渠道</Button>
                </Space>
              </Form.Item>
            </Row> */}
             <Row>
          <Form.Item label="购进渠道" name="gjqd">
                      <Select
                  style={{
                    width: 100,
                  }}
                  options={[
                    {
                      value: '指定渠道',
                      label: '指定渠道',
                    },
                  ]}
                /> 
              </Form.Item>
              <Button className='antbtn'>请选择渠道</Button>
        </Row>
            <Row>
              <Col span={1}></Col>
              <Col span={23}>
                <Table
                  dataSource={dataSource}
                  columns={columns}
                  size="small"
                  pagination={false}
                />
              </Col>
            </Row>
          </Form>
        </div>
        {/* 第二大块 */}
        <div className="mianHead">
          <div className="line"></div>
          <div className="title">
            <Space>
              <i className="one">2</i>
              <span>产品政策</span>
            </Space>
          </div>
        </div>
        <div className="twoContent">
          <Row align="middle" className="chanpinzhengce">
            <Button type="primary">添加产品</Button>
            <Col offset={1}>
              <span>购进总指标（万元）：</span>
              <span>￥152.65</span>
            </Col>
            <Col offset={1}>
              <span>指标按季度分解（万元）：</span>
              <span>【Q1】 ￥12.5</span>
              <span>【Q1】 ￥12.5</span>
              <span>【Q1】 ￥12.5</span>
              <span>【Q1】 ￥12.5</span>
            </Col>
            <Col offset={1}>
              <span>指标按季度分解（万元）：</span>
              <span>【Q1】 ￥12.5</span>
            </Col>
          </Row>
          <div className="mianContent">
            <Row justify="space-between" align="middle" className="chanpin">
              <Col>
                <Space>
                  <span>产品：</span>
                  <Button>选择产品</Button>
                  <a href="dangerlysetinnerhtml:;">美服胶丸 24粒/盒</a>
                  <div style={{ marginLeft: 50 }}>
                    <span>协议效期：</span>
                    <RangePicker showTime />
                  </div>
                </Space>
              </Col>
              <Col>
                <Button danger>删除</Button>
              </Col>
            </Row>
            <Table
              dataSource={dataSource2}
              columns={columns2}
              size="small"
              pagination={false}
              bordered
            /><Table
            dataSource={dataSource3}
            columns={columns3}
            size="small"
            pagination={false}
            bordered
            style={{ marginTop: 10 }}
          />
            
          </div>
        </div>
        {/* 第三大块 */}
        <div className="mianHead">
          <div className="line"></div>
          <div className="title">
            <Space>
              <i className="one">2</i>
              <span>补充协议</span>
            </Space>
          </div>
        </div>
        <div className="mianContent">
          <Tabs
            defaultActiveKey="1"
            items={items}
            type="card"
            tabBarExtraContent={operations}
          />
        </div>
        <div>
        <Button type="primary">保存</Button>
        </div>
      </div>
    </div>
  )
}
